body {
	margin: 0rem;
	/* 外边距 */
}

/* 行内元素,不独占一行,定义宽高获取不到数据。
块元素:独占一行.可以读取到定义宽高。
行内块元素:不独占一行,可以读取到定义宽高。*/
.banner {
	position: relative;/* 相对定位 */
	width: 1000px;
	height: 400px;
	overflow: hidden;
	/* 自由展开,超出部分隐藏{前提:固定宽和高} */
	margin: auto;
}

ul,
li {
	margin: 0rem;
	/* 外边距 */
	padding: 0rem;
	/* 内边距 */
	list-style: none;
	/* 去掉圆点/去掉li前的序号 */
}

.banner .bd ul li img {
	display: block;
	/* 转换为块元素 */
	width: 100%;
}

.banner .hd {
	position: absolute;/* 绝对定位 (使用绝对定位后，块元素默认100%宽度不存在,{在给一次即可})*/
	text-align: center;/* 内容居中/文字居中 */
	/* background: #060; */
	bottom: 10px;
	width: 100%;
	top: 300px;
}

.banner .hd ul li {
	background: #ffffff;
	width: 50px;
	height: 5px;
	display: inline-block;/* 转换为行内块元素 */
}
.banner .hd ul .on{
	background: #00ffff;
}
.banner span{
	display: block;/* 转换为块元素 */
	width: 60px;
	height: 80px;
	background: rgb(0,0,0,0.5);
	position: absolute;
	top: 50%;
	text-align: center;/* 文字居中 */
	line-height: 80px;/* 行高 */
	color: #FFFFFF;/* 文字颜色 */
	font-size: 35px;/* 文字大小 */
	font-family: "楷体";/* 改字体 */
	font-weight: bold;/* 文字加粗 */
	margin-top: -40px;
	border-radius: 0 10px 10px 0;/* 圆角半径,左上 右上 右下 左下 */
	cursor: pointer;/* 鼠标手形 */
}
.prev{
	right: 0px;
	border-radius: 10px 0 0 10px;
}